<template>
  <div>
    <div v-if="isTab">
      <div v-if="state !== 'detail'" class="operation-group">
        <el-upload
          multiple
          :show-file-list="false"
          :action="uploadUrl"
          :on-success="onSuccess"
          :on-error="onError"
          :on-progress="onProgress"
          :before-upload="beforeUpload"
          :headers="headers"
          :accept="getUploadFileRules.map((n) => n.toLowerCase()).join(',')"
        >
          <el-button plain type="single-number">上传附件</el-button>
        </el-upload>
      </div>
      <slot name="tooltip" />
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="fileList"
          :style="{ 'margin-top': state === 'detail' ? '41px' : 0 }"
          border
        >
          <el-table-column
            :show-overflow-tooltip="true"
            label="序号"
            type="index"
            min-width="20%"
            height="36px"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="fileName"
            label="文件名称"
            min-width="100%"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="fileSize"
            label="文件大小"
            min-width="70%"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="附件说明"
            min-width="70%"
          >
            <template slot-scope="{ row }">
              <span v-if="state === 'detail'">{{ row.fileDesc }}</span>
              <el-input
                v-else
                placeholder="请输入附件说明"
                maxlength="100"
                v-model="row.fileDesc"
                @blur="handleBlur(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="createTime"
            label="上传时间"
            min-width="90%"
          >
            <template slot-scope="{ row }">
              <span>{{
                row.uploadTime || row.createTimeStr || row.createTime
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showType"
            :show-overflow-tooltip="true"
            prop="fileType"
            label="附件类型"
            min-width="70%"
          >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="操作"
            align="left"
            appendixInfor.vue
            min-width="70%"
          >
            <template slot-scope="{ row, $index }">
              <span
                v-if="state !== 'detail'"
                style="color: #0089ef; cursor: pointer"
                @click="deleteAppend($index)"
                >删除</span
              >
              <span
                v-else
                style="color: #0089ef; cursor: pointer"
                @click="downLoad(row)"
                >下载</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-group-title v-else :title="title" class="ccui-group-wrapper">
      <template slot="groupTitle">
        <div v-if="state !== 'detail'" class="extend-btn">
          <el-upload
            multiple
            :show-file-list="false"
            :action="uploadUrl"
            :on-success="onSuccess"
            :on-error="onError"
            :on-progress="onProgress"
            :before-upload="beforeUpload"
            :headers="headers"
            :accept="getUploadFileRules.map((n) => n.toLowerCase()).join(',')"
          >
            <el-button plain type="single-number">上传附件</el-button>
          </el-upload>
        </div>
        <div class="ccui-multifunctional-table-wrapper">
          <el-table
            :data="fileList"
            :style="{ 'margin-top': state === 'detail' ? '41px' : 0 }"
            border
            :header-cell-class-name="headerMandatory"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="序号"
              type="index"
              min-width="20%"
              height="36px"
            />
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileName"
              label="文件名称"
              min-width="100%"
            >
            </el-table-column>
            <el-table-column
              v-if="uploadType === 'uploadType'"
              :show-overflow-tooltip="true"
              prop="fileTypeName"
              label="文件类型"
              min-width="100%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="fileSize"
              label="文件大小"
              min-width="70%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="附件说明"
              min-width="70%"
            >
              <template slot-scope="{ row }">
                <span v-if="state === 'detail'">{{ row.fileDesc }}</span>
                <el-input
                  v-else
                  placeholder="请输入附件说明"
                  maxlength="100"
                  v-model="row.fileDesc"
                  @blur="handleBlur(row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="上传时间"
              min-width="90%"
            >
              <template slot-scope="{ row }">
                <span>{{
                  row.uploadTime || row.createTimeStr || row.createTime
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="showType"
              :show-overflow-tooltip="true"
              prop="fileType"
              label="附件类型"
              min-width="70%"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="操作"
              align="left"
              min-width="70%"
            >
              <template slot-scope="{ row, $index }">
                <span
                  v-if="state !== 'detail'"
                  style="color: #0089ef; cursor: pointer"
                  @click="deleteAppend($index)"
                  >删除</span
                >
                <span
                  v-else
                  style="color: #0089ef; cursor: pointer"
                  @click="downLoad(row)"
                  >下载</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
    </el-group-title>
  </div>
</template>

<script>
import { generateUUID } from "@/basa/utils";
import { cloneDeep } from "lodash";
import UploadInfo from "@/basa/mixins/uploadInfo";

export default {
  name: "uploadInfo",
  mixins: [UploadInfo],
  model: {
    prop: "parentData",
    event: "uploadSuccess",
  },
  props: {
    requiredCell:{
      type:Boolean,
      default:false
    },
    isTab: {
      type: Boolean,
      default: false,
    },
    showType: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    state: {
      type: String,
      default: "",
    },
    uploadType: {
      type: String,
      default: "",
    },
    parentData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    init() {
      const temp = this.parentData.map((n) => ({
        ...n,
        onlyId: generateUUID(),
        fileSize: String(n.fileSize).endsWith("kb")
          ? n.fileSize
          : Math.round(Number(n.fileSize) / 1024) + "kb",
      }));
      this.fileList = cloneDeep(temp);
      this.uploadList = cloneDeep(temp);
    },
    headerMandatory(data){
      if(data.columnIndex !== 0 &&data.columnIndex !== 3 && data.columnIndex !== 5&& this.requiredCell){
        return 'headerMandatory'
      }
    },

    onSuccess({ message, data }) {
      this.$message.success("附件上传成功");
      this.uploadLoading.close();
      let [{ uploadId, fileName, fileSize, createTime }] = data;
      const obj = {
        uploadId,
        fileName,
        createTime,
        fileDesc: "",
        isChangeFlag: 1, // 0=未变更 1=变更
        businessSonType: "5",
        onlyId: generateUUID(),
        sn: this.uploadList.length + 1,
        fileSize: Math.round(fileSize / 1024) + "kb",
      };

      this.fileList.push(obj);
      this.uploadList.push(obj);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table {
    margin-bottom: 20px;
    width: 100%;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .el-table th.headerMandatory > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}
</style>
